<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
     
      html{
            perspective: 800px;
            /* max-width: ; */
      }
        .aa{
           width: 100px;
           height: 100px;
          
            margin: 200px auto;
            transition: all  2s;
           animation: fly 1s infinite linear;
        }
     

.aa:hover{
             /*面向z轴旋转，相当于小风车*/
          /* transform:rotateZ(360deg); */
           /*要设置视距的时候才生效*/

           /*
             往x轴旋转
           */
          /* transform: rotateX(40deg) rotateY(40deg);  */

          /* transform: translateZ(400px) rotateY(360deg); */
          
}
@keyframes fly {
    from{
  
        transform: rotateZ(0deg);

    }
    to{
 
        transform: rotateZ(360deg);
    }
    
}
    </style>
</head>
<body>
  <img src="../img/fenche.png" class="aa">
</body>
</html>